@contentful/field-editor-markdown 1.2.0 → 1.3.0

package/dist/cjs/MarkdownActions.js

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createMarkdownActions", {
+    enumerable: true,
+    get: function() {
+        return createMarkdownActions;
+    }
+});
+const _ConfirmInsertAssetModalDialog = require("./dialogs/ConfirmInsertAssetModalDialog");
+const _EmdebExternalContentDialog = require("./dialogs/EmdebExternalContentDialog");
+const _InsertLinkModalDialog = require("./dialogs/InsertLinkModalDialog");
+const _InsertTableModalDialog = require("./dialogs/InsertTableModalDialog");
+const _SpecialCharacterModalDialog = require("./dialogs/SpecialCharacterModalDialog");
+const _ZenModeModalDialog = require("./dialogs/ZenModeModalDialog");
+const _insertAssetLinks = require("./utils/insertAssetLinks");
+const _linkOrganizer = _interop_require_wildcard(require("./utils/linkOrganizer"));
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function createMarkdownActions(props) {
+    const { sdk , editor , locale  } = props;
+    const insertAssetsWithConfirmation = async (assets)=>{
+        if (assets) {
+            const { links , fallbacks  } = await (0, _insertAssetLinks.insertAssetLinks)(assets, {
+                localeCode: locale,
+                defaultLocaleCode: sdk.locales.default,
+                fallbackCode: sdk.locales.fallbacks[locale]
+            });
+            if (links && links.length > 0) {
+                if (fallbacks) {
+                    const insertAnyway = await (0, _ConfirmInsertAssetModalDialog.openConfirmInsertAsset)(sdk.dialogs, {
+                        locale: locale,
+                        assets: fallbacks
+                    });
+                    if (!insertAnyway) {
+                        throw Error('User decided to not use fallbacks');
+                    }
+                }
+                return links.map((link)=>link.asMarkdown).join('\n\n');
+            }
+        }
+        return '';
+    };
+    return {
+        headings: {
+            h1: ()=>{
+                editor?.actions.h1();
+            },
+            h2: ()=>{
+                editor?.actions.h2();
+            },
+            h3: ()=>{
+                editor?.actions.h3();
+            }
+        },
+        simple: {
+            italic: ()=>{
+                editor?.actions.italic();
+            },
+            bold: ()=>{
+                editor?.actions.bold();
+            },
+            quote: ()=>{
+                editor?.actions.quote();
+            },
+            ol: ()=>{
+                editor?.actions.ol();
+            },
+            ul: ()=>{
+                editor?.actions.ul();
+            },
+            strike: ()=>{
+                editor?.actions.strike();
+            },
+            code: ()=>{
+                editor?.actions.code();
+            },
+            hr: ()=>{
+                editor?.actions.hr();
+            },
+            indent: ()=>{
+                editor?.actions.indent();
+            },
+            dedent: ()=>{
+                editor?.actions.dedent();
+            }
+        },
+        history: {
+            undo: ()=>{
+                editor?.actions.undo();
+            },
+            redo: ()=>{
+                editor?.actions.redo();
+            }
+        },
+        insertLink: async ()=>{
+            if (!editor) {
+                return;
+            }
+            editor.usePrimarySelection();
+            const selectedText = editor.getSelectedText();
+            const result = await (0, _InsertLinkModalDialog.openInsertLinkDialog)(sdk.dialogs, {
+                selectedText
+            });
+            if (result) {
+                editor.actions.link(result.url, selectedText || result.text, result.title);
+            }
+        },
+        insertSpecialCharacter: async ()=>{
+            if (!editor) {
+                return;
+            }
+            const result = await (0, _SpecialCharacterModalDialog.openInsertSpecialCharacter)(sdk.dialogs);
+            if (result) {
+                editor.insert(result);
+            }
+        },
+        insertTable: async ()=>{
+            if (!editor) {
+                return;
+            }
+            const result = await (0, _InsertTableModalDialog.openInsertTableDialog)(sdk.dialogs);
+            if (result) {
+                editor.actions.table(result);
+            }
+        },
+        organizeLinks: ()=>{
+            if (!editor) {
+                return;
+            }
+            let text = editor.getContent();
+            if (!text) {
+                return;
+            }
+            text = _linkOrganizer.convertInlineToRef(text);
+            text = _linkOrganizer.rewriteRefs(text);
+            editor.setContent(text);
+            sdk.notifier.success('All your links are now references at the bottom of your document.');
+        },
+        embedExternalContent: async ()=>{
+            if (!editor) {
+                return;
+            }
+            const result = await (0, _EmdebExternalContentDialog.openEmbedExternalContentDialog)(sdk.dialogs);
+            if (result) {
+                editor.insert(result);
+            }
+        },
+        addNewMedia: async ()=>{
+            if (!editor) {
+                return;
+            }
+            try {
+                const { entity: asset  } = await sdk.navigator.openNewAsset({
+                    slideIn: {
+                        waitForClose: true
+                    }
+                });
+                const markdownLinks = await insertAssetsWithConfirmation([
+                    asset
+                ]);
+                editor.insert(markdownLinks);
+            } finally{
+                editor.focus();
+            }
+        },
+        linkExistingMedia: async ()=>{
+            if (!editor) {
+                return;
+            }
+            try {
+                const assets = await sdk.dialogs.selectMultipleAssets({
+                    locale: locale
+                });
+                const markdownLinks = await insertAssetsWithConfirmation(assets);
+                editor.insert(markdownLinks);
+            } finally{
+                editor.focus();
+            }
+        },
+        openZenMode: async ()=>{
+            if (!editor) {
+                return;
+            }
+            const result = await (0, _ZenModeModalDialog.openZenMode)(sdk.dialogs, {
+                initialValue: editor.getContent(),
+                locale: props.locale
+            });
+            editor.setContent(result.value);
+            if (result.cursor) {
+                editor.setCursor(result.cursor);
+            }
+            editor.focus();
+        },
+        closeZenMode: ()=>{}
+    };
+}

package/dist/cjs/MarkdownEditor.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    MarkdownEditor: function() {
+        return MarkdownEditor;
+    },
+    MarkdownEditorConnected: function() {
+        return MarkdownEditorConnected;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _emotion = require("emotion");
+const _MarkdownBottomBar = require("./components/MarkdownBottomBar");
+const _MarkdownConstraints = require("./components/MarkdownConstraints");
+const _MarkdownPreview = require("./components/MarkdownPreview");
+const _MarkdownTabs = require("./components/MarkdownTabs");
+const _MarkdownTextarea = require("./components/MarkdownTextarea/MarkdownTextarea");
+const _MarkdownToolbar = require("./components/MarkdownToolbar");
+const _CheatsheetModalDialog = require("./dialogs/CheatsheetModalDialog");
+const _MarkdownActions = require("./MarkdownActions");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    container: (0, _emotion.css)({
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: _f36tokens.default.fontStackPrimary
+    })
+};
+function MarkdownEditor(props) {
+    const [currentValue, setCurrentValue] = _react.useState(props.initialValue ?? '');
+    const [selectedTab, setSelectedTab] = _react.useState('editor');
+    const [editor, setEditor] = _react.useState(null);
+    const [canUploadAssets, setCanUploadAssets] = _react.useState(false);
+    _react.useEffect(()=>{
+        if (editor && props.onReady) {
+            props.onReady(editor);
+            setTimeout(()=>{
+                editor.refresh();
+            }, 1);
+        }
+    }, [
+        editor
+    ]);
+    _react.useEffect(()=>{
+        props.sdk.access.can('create', 'Asset').then((value)=>{
+            setCanUploadAssets(value);
+        });
+    }, []);
+    _react.useEffect(()=>{
+        if (editor) {
+            editor.setReadOnly(props.disabled);
+        }
+    }, [
+        editor,
+        props.disabled
+    ]);
+    const isActionDisabled = editor === null || props.disabled || selectedTab !== 'editor';
+    const direction = props.sdk.locales.direction[props.sdk.field.locale] ?? 'ltr';
+    const actions = _react.useMemo(()=>{
+        return (0, _MarkdownActions.createMarkdownActions)({
+            sdk: props.sdk,
+            editor,
+            locale: props.sdk.field.locale
+        });
+    }, [
+        editor
+    ]);
+    const openMarkdownHelp = _react.useCallback(()=>{
+        (0, _CheatsheetModalDialog.openCheatsheetModal)(props.sdk.dialogs);
+    }, []);
+    return _react.createElement("div", {
+        className: styles.container,
+        "data-test-id": "markdown-editor"
+    }, _react.createElement(_MarkdownTabs.MarkdownTabs, {
+        active: selectedTab,
+        onSelect: (tab)=>{
+            setSelectedTab(tab);
+        }
+    }), _react.createElement(_MarkdownToolbar.MarkdownToolbar, {
+        mode: "default",
+        disabled: isActionDisabled,
+        canUploadAssets: canUploadAssets,
+        actions: actions
+    }), _react.createElement(_MarkdownTextarea.MarkdownTextarea, {
+        minHeight: props.minHeight,
+        mode: "default",
+        visible: selectedTab === 'editor',
+        disabled: isActionDisabled,
+        direction: direction,
+        onReady: (editor)=>{
+            editor.setContent(props.initialValue ?? '');
+            editor.setReadOnly(props.disabled);
+            setEditor(editor);
+            editor.events.onChange((value)=>{
+                const trimmedValue = value.replace(/^\s+$/gm, '');
+                props.saveValueToSDK(trimmedValue);
+                setCurrentValue(value);
+            });
+        }
+    }), selectedTab === 'preview' && _react.createElement(_MarkdownPreview.MarkdownPreview, {
+        direction: direction,
+        minHeight: props.minHeight,
+        mode: "default",
+        value: currentValue,
+        previewComponents: props.previewComponents
+    }), _react.createElement(_MarkdownBottomBar.MarkdownBottomBar, null, _react.createElement(_MarkdownBottomBar.MarkdownHelp, {
+        onClick: openMarkdownHelp
+    })), _react.createElement(_MarkdownConstraints.MarkdownConstraints, {
+        sdk: props.sdk,
+        value: currentValue
+    }));
+}
+function MarkdownEditorConnected(props) {
+    return _react.createElement(_fieldeditorshared.FieldConnector, {
+        throttle: 300,
+        field: props.sdk.field,
+        isInitiallyDisabled: props.isInitiallyDisabled
+    }, ({ value , disabled , setValue , externalReset  })=>{
+        return _react.createElement(MarkdownEditor, {
+            ...props,
+            key: `markdown-editor-${externalReset}`,
+            initialValue: value,
+            disabled: disabled,
+            saveValueToSDK: setValue
+        });
+    });
+}

package/dist/cjs/__fixtures__/FakeSdk.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "newReferenceEditorFakeSdk", {
+    enumerable: true,
+    get: function() {
+        return newReferenceEditorFakeSdk;
+    }
+});
+const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
+const _fixtures = require("./fixtures");
+const newLink = (linkType, id)=>({
+        sys: {
+            id,
+            linkType,
+            type: 'Link'
+        }
+    });
+function newReferenceEditorFakeSdk(props) {
+    const rawInitialValue = window.localStorage.getItem('initialValue');
+    const initialValue = rawInitialValue ? JSON.parse(rawInitialValue) : props?.initialValue;
+    const rawValidations = window.localStorage.getItem('fieldValidations');
+    const validations = rawValidations ? JSON.parse(rawValidations) : props?.validations;
+    const customizeMock = (field)=>{
+        return validations ? {
+            ...field,
+            validations
+        } : field;
+    };
+    const [field, mitt] = (0, _fieldeditortestutils.createFakeFieldAPI)(customizeMock, initialValue);
+    const space = (0, _fieldeditortestutils.createFakeSpaceAPI)();
+    const locales = (0, _fieldeditortestutils.createFakeLocalesAPI)();
+    const entryLinks = [
+        newLink('Entry', _fixtures.entries.published.sys.id),
+        newLink('Entry', _fixtures.entries.changed.sys.id),
+        newLink('Entry', _fixtures.entries.empty.sys.id)
+    ];
+    const assetLinks = [
+        newLink('Asset', _fixtures.assets.published.sys.id),
+        newLink('Asset', _fixtures.assets.changed.sys.id),
+        newLink('Asset', _fixtures.assets.empty.sys.id)
+    ];
+    let selectorCounter = 0;
+    const delay = (ms)=>{
+        return new Promise((resolve)=>setTimeout(resolve, ms));
+    };
+    const localizeContentTypes = (contentTypes)=>{
+        return contentTypes.map((contentType)=>({
+                ...contentType,
+                fields: contentType.fields.map((field)=>({
+                        ...field,
+                        localized: true
+                    }))
+            }));
+    };
+    const sdk = {
+        field,
+        locales,
+        cmaAdapter: (0, _fieldeditortestutils.createFakeCMAAdapter)({
+            Entry: {
+                get: async ({ entryId  })=>{
+                    if (props?.fetchDelay) {
+                        await delay(props.fetchDelay);
+                    }
+                    if (entryId === _fixtures.entries.empty.sys.id) {
+                        return _fixtures.entries.empty;
+                    }
+                    if (entryId === _fixtures.entries.published.sys.id) {
+                        return _fixtures.entries.published;
+                    }
+                    if (entryId === _fixtures.entries.changed.sys.id) {
+                        return _fixtures.entries.changed;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Asset: {
+                get: async ({ assetId  })=>{
+                    if (props?.fetchDelay) {
+                        await delay(props.fetchDelay);
+                    }
+                    if (assetId === _fixtures.assets.empty.sys.id) {
+                        return _fixtures.assets.empty;
+                    }
+                    if (assetId === _fixtures.assets.published.sys.id) {
+                        return _fixtures.assets.published;
+                    }
+                    if (assetId === _fixtures.assets.changed.sys.id) {
+                        return _fixtures.assets.changed;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Space: {
+                get: async (params)=>{
+                    if (params.spaceId === _fixtures.spaces.indifferent.sys.id) {
+                        return _fixtures.spaces.indifferent;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            ContentType: {
+                get: async ({ contentTypeId  })=>{
+                    if (contentTypeId === _fixtures.contentTypes.published.sys.id) {
+                        return _fixtures.contentTypes.published;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Locale: {
+                getMany: async ()=>_fixtures.locales.list
+            }
+        }),
+        space: {
+            ...space,
+            getCachedContentTypes () {
+                return localizeContentTypes(space.getCachedContentTypes());
+            },
+            getContentTypes () {
+                return Promise.resolve(space.getContentTypes().then((response)=>{
+                    return {
+                        ...response,
+                        items: localizeContentTypes(response.items)
+                    };
+                }));
+            },
+            async getEntityScheduledActions () {
+                return [];
+            }
+        },
+        dialogs: {
+            selectSingleAsset: async ()=>{
+                selectorCounter++;
+                return assetLinks[selectorCounter % assetLinks.length];
+            },
+            selectMultipleAssets: async ()=>{
+                selectorCounter++;
+                return selectorCounter % 2 ? assetLinks.slice(0, 2) : [
+                    assetLinks[2]
+                ];
+            },
+            selectSingleEntry: async ()=>{
+                selectorCounter++;
+                return entryLinks[selectorCounter % entryLinks.length];
+            },
+            selectMultipleEntries: async ()=>{
+                selectorCounter++;
+                return selectorCounter % 2 ? entryLinks.slice(0, 2) : [
+                    entryLinks[2]
+                ];
+            }
+        },
+        navigator: {
+            openNewAsset: async ()=>({
+                    entity: newLink('Asset', _fixtures.assets.empty.sys.id)
+                }),
+            openAsset: async ()=>{
+                alert('open Asset in slide in');
+                return {};
+            },
+            openNewEntry: async ()=>({
+                    entity: newLink('Entry', _fixtures.entries.empty.sys.id)
+                }),
+            openEntry: async ()=>{
+                alert('open entry in slide in');
+                return {};
+            },
+            onSlideInNavigation: ()=>()=>({})
+        },
+        access: {
+            can: async ()=>true
+        },
+        ids: {
+            space: 'space-id',
+            environment: 'environment-id'
+        }
+    };
+    return [
+        sdk,
+        mitt
+    ];
+}

package/dist/cjs/__fixtures__/asset/index.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    changed: function() {
+        return _changed_assetjson.default;
+    },
+    empty: function() {
+        return _empty_assetjson.default;
+    },
+    published: function() {
+        return _published_assetjson.default;
+    },
+    invalid: function() {
+        return _invalid_assetjson.default;
+    },
+    created: function() {
+        return _created_assetjson.default;
+    }
+});
+const _changed_assetjson = _interop_require_default(require("./changed_asset.json"));
+const _created_assetjson = _interop_require_default(require("./created_asset.json"));
+const _empty_assetjson = _interop_require_default(require("./empty_asset.json"));
+const _invalid_assetjson = _interop_require_default(require("./invalid_asset.json"));
+const _published_assetjson = _interop_require_default(require("./published_asset.json"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}

package/dist/cjs/__fixtures__/content-type/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "published", {
+    enumerable: true,
+    get: function() {
+        return _published_content_typejson.default;
+    }
+});
+const _published_content_typejson = _interop_require_default(require("./published_content_type.json"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}

package/dist/cjs/__fixtures__/entry/index.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    changed: function() {
+        return _changed_entryjson.default;
+    },
+    empty: function() {
+        return _empty_entryjson.default;
+    },
+    published: function() {
+        return _published_entryjson.default;
+    },
+    invalid: function() {
+        return _invalid_entryjson.default;
+    }
+});
+const _changed_entryjson = _interop_require_default(require("./changed_entry.json"));
+const _empty_entryjson = _interop_require_default(require("./empty_entry.json"));
+const _invalid_entryjson = _interop_require_default(require("./invalid_entry.json"));
+const _published_entryjson = _interop_require_default(require("./published_entry.json"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}